<!-- 首页的货盘列表 -->

<template>
	<view class="background_white flex_col" style="margin-left: 24rpx;width:702rpx;border-radius: 4rpx;" @click="click_pallet_item">
		<view class="relative">
			<image mode="aspectFill" :src="pallet.image_link" style="width: 702rpx;height:276rpx;position: absolute;top:0;left:0;right:0;bottom:0;border-top-right-radius: 4rpx;border-top-left-radius: 4rpx;"/>
			
			<view style="padding:20rpx 0 40rpx 0;border-radius: 8rpx;width: 702rpx;height:276rpx;position: absolute;top:0;left:0;right:0;bottom:0" class="flex_col">
				<!-- 定位 -->
				<view class="flex_row">
					<view class="flex_col center">
						<view class="flex_row full_width center" style="margin-left: 40rpx;">
							<text class="iconfont icon_location_grey" style="font-size: 18rpx;color: black;"/>
							<view class="bold" style="font-size: 20rpx;color: black;margin-left: 8rpx;">{{pallet.location}}</view>
							<view class="flex"/>
							<view style="width: 20rpx;"></view>
						</view>
						<view style="font-size: 32rpx;color: black;margin-left: 45rpx;margin-top: 34rpx;" class="bold">
							{{pallet.goods_pallet_name}}</view>
						<view class="single_line" style="max-width:630rpx;font-size: 20rpx;color: black;margin-left: 45rpx;">{{pallet.introduce}}</view>
						<view class="flex_row">
							<view class="center flex_row"
								style="padding:4rpx 20rpx;background-color: black;margin-top: 20rpx;margin-left: 40rpx;border-radius: 10rpx;">
								<view style="font-size: 20rpx;color: white;">{{pallet.delivery}}</view>
								<view style="height:16rpx;width:2rpx;background-color: white;margin: 0 10rpx;" />
								<view style="font-size: 14rpx;color: white;">¥</view>
								<view style="font-size: 20rpx;color: white;"> {{pallet.min_price + '~' + pallet.max_price}}</view>
							</view>
							<view class="flex">
									
							</view>
						</view>
					</view>
					<view class="flex">
						
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
		<!-- 中间的图片 -->
		<view class="flex_row" style="background-color: #fafafa;margin-top: 276rpx;">
			<view style="padding: 16rpx;">
				<view style="height:335rpx;width:328rpx;position: relative;">
					<fl_image :avatar="false" :src="pallet_images[0].picture" height="335" width="328"></fl_image>
					<view class="flex_row" style="border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx;justify-content: center;padding: 12rpx 0rpx;position: absolute;bottom: 0;width: 328rpx;background-color: rgba(255, 255, 255, 0.6);">
						<image v-if="get_tag(pallet_images[0].style_tag)" :src="get_tag(pallet_images[0].style_tag)" class="img2" mode="heightFix"/>
						<view style="font-size: 20rpx;color: black;">直播价格：￥</view>
						<view style="font-size: 20rpx;color: black;" class="bold">{{!hasLogin ? '***' : format(pallet_images[0].price)}}</view>
					</view>
				</view>
			</view>
			
			<view class="wrap flex_row"
				style="margin-right: 16rpx;margin-top: 16rpx;display: flex;justify-content: space-between;align-items: flex-start;">
				<view v-for="(item,index) in pallet_images" :key="index">
					<view style="position: relative;">
						<view v-if="index == 3">
							<!-- <fl_image  :src="item.picture" height="160" width="160" style="border-radius: 10rpx;"></fl_image> -->
							<!-- <view class="flex_row" style="border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx;position: absolute;bottom:0;width:160rpx;justify-content: center;align-items: baseline;background-color: rgba(255, 255, 255, 0.6);">
								<view style="font-size: 14rpx;color: black;">直播价：</view>
								<view style="font-size: 12rpx;color: black;" class="bold">{{item.price}}</view>
							</view> -->
							<view class="relative" style="height:160rpx;width:160rpx;">
								<image src="/static/common/pic_placeholder.png" style="height:160rpx;width:160rpx;"></image>
								
								<view class="absolute" style="background-color: rgba(0, 0, 0, 0.2);height:160rpx;width:160rpx;top:0;left:0;right:0;bottom:0;border-radius: 10rpx;"></view>
								<view class="flex_row center absolute" style="height:160rpx;width:160rpx;top:0;left:0;right:0;bottom:0">
									<view style="font-size: 24rpx;color: white;">共{{pallet.product_count}}款</view>
									<view class="iconfont icon_arrow_right" style="font-size: 20rpx;color: white;margin-left: 6rpx;"/>
								</view>
							</view>
						</view>
						<view v-else style="height: 160rpx;width: 160rpx;">
							<fl_image :src="pallet_images[index+1].picture" height="160" width="160" style="border-radius: 10rpx;"></fl_image>
							<view class="relative" style="border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx;position: absolute;bottom:0;width:160rpx;justify-content: center;align-items: baseline;background-color: rgba(255, 255, 255, 0.6);">
								<view class="position flex_row center" style="bottom: 0;height: 30rpx;">
									<image v-if="get_tag(pallet_images[index+1].style_tag)" :src="get_tag(pallet_images[index+1].style_tag)" class="img" mode="heightFix"/>
									<view class="flex_row baseline">
										<view style="font-size: 14rpx;color: black;">直播价：</view>
										<view style="font-size: 8rpx;">¥</view>
										<view style="font-size: 12rpx;color: black;" class="bold">{{get_price(index)}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 下边的风格和浏览人数 -->
		<view class="flex_row center" style="padding-left: 20rpx;background-color: #fafafa;">
			<view v-for="item,index in pallet.style_tags" :key="index">
				<view
					style="margin-right: 20rpx;font-size: 20rpx;color: #00C2C4;padding: 2rpx 8rpx;background-color: rgba(204, 243, 243, 0.4);border-radius: 8rpx;">
					{{item}}</view>
			</view>
			<view class="flex"></view>
			<view class="flex_row center" style="margin-right: 16rpx;">
				<text class="iconfont icon_eye" style="font-size: 24rpx;color: grey;"/>
				<!-- <view style="height:16rpx;width:20rpx;background-color: red;" /> -->
				<view style="font-size: 20rpx;color: grey;margin-left: 10rpx;">{{pallet.page_view}}</view>
			</view>
		</view>
		<view style="height: 16rpx;background-color: #fafafa;border-bottom-left-radius: 4rpx;border-bottom-right-radius: 4rpx;"></view>
	</view>
</template>

<script>
	import {format_money} from "../../utils/utils.js"
	import store from "../../utils/store.js"
	import fl_image from "../fl_image.vue"
	export default {
		components: {
			fl_image,
		},
		name: "main_pallet_item",
		data() {
			return {
				pallet_images: [
					
				],
				has_login:false
			};
		},
		watch:{
			pallet(new_val){
				this.pallet = new_val;
			}
		},
		computed:{
			hasLogin(){
				return store.state.hasLogin
			},
		},
		created() {
			this.pallet_images = this.pallet.recommend_goods
			this.has_login = store.state.hasLogin
		},
		methods: {
			format(price){
				return format_money(price)
			},
			get_price(index){
				if(!store.state.hasLogin){
					return "***"
				}
				return format_money(this.pallet_images[index+1].price)
			},
			click_pallet_item() {
				this.$emit("click_pallet_item", this.pallet)
			},
			get_tag(tag){
				if(tag == "荐"){
					return "/static/common/txt_recommend.png"
				}else if(tag == "新"){
					return  "/static/common/txt_new.png"
				}
			},
		},
		mounted() {

		},
		props: {
			pallet: {
				type: Object,
				default: null
			}
		}
	}
</script>

<style>
	.background {
		background-image: url("http://pic1.win4000.com/wallpaper/e/57bff12242d98.jpg");
	}

	.gridient_back {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
	}
	.img{
		height: 14rpx;
	}
	
	.img2{
		padding-top: 7rpx;
		height:20rpx;
	}
</style>
